<template>
    <div>
        <input placeholder="请输入对方ID" v-model="uid"
               type="number"
               pattern="[0-9]*"
               onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )'>
        <div class="line"></div>
        <input placeholder="请输入对方手机号" v-model="phone"
               type="number"
               pattern="[0-9]*"
               onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )'>
        <p class="p1">钱将实时转入对方账号，无法退款</p>
        <p class="p1">余额转账流程视频请点 <span @click="toVide">这里</span>查看，无法退款</p>
        <div class="btn-db">
            <button-normal
                    widthPro="200"
                    heightPro="35"
                    :textBtn="textBtn"
                    color="#fff"
                    size="14"
                    @click.native="toRevise"
            ></button-normal>
        </div>
        <confirm
                title="提示"
                text="您还没有实名认证，是否进行实名认证"
                confirmBtnText="是"
                cancelBtnText="否"
                ref="confirm2"
                @confirm="confirm"
        ></confirm>
    </div>
</template>

<script>
    import API from '../../../request/api';
    import buttonNormal from '../../../components/common/buttonNormal';
    import {Toast} from 'vant';
    import confirm from '@/components/common/confirm';
    import regular from '@/common/regular';

    export default {
        /**
         * 余额转账
         * */
        name: 'transa',
        data() {
            return {
                uid: '',
                phone: '',
                textBtn: '下一步',
                stateReal: true // 实名认证变量
            };
        },
        components: {buttonNormal, confirm},
        computed: {},
        watch: {
            // 监听具体数据变化，并做相应的处理
        },
        methods: {
            toRevise() {
                //    下一步
                if (!this.uid) {
                    Toast('对方ID未填写');
                } else if (!this.phone) {
                    Toast('手机号未填写');
                } else if (!regular.REGEX_CHINA_MOBILE.test(this.phone)) {
                    Toast('手机号填写错误');
                } else if (this.uid && this.phone && this.stateReal) {
                    let data = {
                        uid: this.uid,
                        phone: this.phone
                    };
                    this.request.get(API.transAmount, data).then((res) => {
                        if (res.canturn === 1) {
                            // 先验证手机号
                            this.$router.push({
                                name: 'transb',
                                query: {
                                    uid: res.uid,
                                    name: res.nickname,
                                    avatar: res.avatar,
                                }
                            });
                        } else {
                            this.$toast.fail('用户ID或手机号不存在');
                        }

                    });

                } else {
                    Toast('请先实名认证并正确填写对方id和手机号');
                }

            },
            confirm() {
                //    实名认证
                this.$router.push({
                    name: 'certification'
                });
            },
            toVide() {
                window.location.href = `http://mp.weixin.qq.com/s?__biz=MzUyNjM5NTcwOA==&mid=100003562&idx=6&sn=9e89179cf4c6d3b7fc32c381f7f6f9f3&chksm=7a0e3eb94d79b7af2cd5787a71a7b7b0d6bca29eecc8974bdc8f63f71a5ff7672535e41693fa#rd`;
            }
        },
        created() {
            // 检查实名认证
            this.request.get(API.isCertify).then(res => {
                // certification 1认证过0未认证
                if (res.certification === '0') {
                    //    未认证
                    //    认证弹窗
                    this.stateReal = false;
                    this.$refs.confirm2.show();
                } else if (res.certification === '1') {
                    // 已认证
                } else {
                    Toast('实名认证返回数据错误');
                }
                console.log(res.certification, 'SaaS');
            });
        },
        mounted() {
        }
    };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    input {
        width 100vw
        height vw(45)
        line-height vw(45)
        padding 0 cellPadding
        font-size word14
        box-sizing border-box
    }

    .btn-db {
        position fixed
        width 100vw
        bottom 0
        background white
    }

    .p1 {
        word-vw(12px, gray9)
        padding 0 cellPadding
        line-height 2
        span {
            word-vw(14px, main-color)
            font-weight bold
        }
    }

    @media (max-height: 400px) {
        .btn-db {
            display: none;
        }
    }
</style>
